<template>
    <div>
        <h3>条件渲染</h3>
        <div v-if="flag">你能看见我吗？</div>
        <div v-else>你还是来看我吧！</div>
        <div v-if="tag === 'A'">A</div>
        <div v-else-if="tag === 'B'">B</div>
        <div v-else-if="tag === 'C'">C</div>
        <div v-else>D</div>
        <div v-show="!flag">Can u see me ?</div>
        <div>v-show初始化的时候会渲染，通过css的display来控制是否显示</div>
        <div>v-if只有在为true的时候才会渲染，为false的时候则会销毁，频繁切换时会造成额外开销</div>
    </div>
</template>

<script>
export default {
    setup () {
        return {
            flag: false,
            tag: "D"
        }
    }
}
</script>

<style lang="scss" scoped>

</style>